<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // Proxy
    // Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编

    // Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。


    var zhang = {  // 目标对象
        name: "张三",  // value:"张三",writable:true, configable:true
        age: 18,
        height: "177cm",
        weight: "70kg",
    }

    // 如何创建代理对象 
    // new Proxy(target,configObj)  方法返回一个代理对象
    // target 目标对象 
    // configObj  配置对象 => 对代理对象进行取值和赋值时,会先触发取值拦截和赋值拦截 => 最终操作目标对象

    // var obj = new Proxy(zhang,{
    //     get:function(target,key){ // target 目标对象  key => 代理对象取值时对应的键名
    //         console.log("取值拦截", key,target ===zhang);
    //         return target[key];   // 此代码注释掉将无法取值
    //     },
    //     set:function(target,key,val){   // target 目标对象  key => 代理对象赋值时对应的键名  val: 代理对象赋值时对应的健值
    //         console.log("赋值拦截", key,val);
    //         target[key] = val;    // 此代码注释掉将无法赋值
    //     }
    // })

    // console.log(obj);
    // console.log(zhang);

    // console.log(obj.name);

    // obj.name = "李四";

    // console.log(zhang);



    // 最简单的代理对象  =>  所有对代理对象的操作,都会同步到目标对象(可以理解为没有拦截)

    // var obj = new Proxy(zhang,{})

    // console.log(obj);
    // console.log(zhang);

    // console.log(obj.name);

    // obj.name = "李四";

    // console.log(zhang);


    var obj = new Proxy(zhang,{
        get:function(target,key){ // target 目标对象  key => 代理对象取值时对应的键名
            console.log("取值拦截", key,target ===zhang);
            if(key == "age") return undefined;
            return target[key];   // 此代码注释掉将无法取值
        },
        set:function(target,key,val){   // target 目标对象  key => 代理对象赋值时对应的键名  val: 代理对象赋值时对应的健值
            console.log("赋值拦截", key,val);
            if(key == "age") return undefined;
            target[key] = val;    // 此代码注释掉将无法赋值
        }
    })

    console.log(obj.age);

    obj.name = "李四";
    obj.age = 28;
    console.log(zhang);

</script>
</html>